<template>
<div class="silder">
    <Carousel loop arrow="always" @on-change="handelSilderChange">
        <CarouselItem v-for="item of swiperList" :key="item.id">
            <div class="demo-carousel">
                <img class="swiper-img" :src="item.imgUrl" />
                <!-- <p>{{item.imgUrlZh}}</p> -->
            </div>
        </CarouselItem>
        
    </Carousel>
    <!-- <div class="silder-body contain">
        <p>易令 – 冷钱包2.0</p>
        <p>安全便捷地连接每个人到区块链</p>
        <span class="tip">
            <Icon type="ios-wifi-outline"/>零触网硬件冷钱包，私钥永不触网<br/>
            <Icon type="ios-key-outline" />芯片级TrustZone安全区域保护私钥安全<br/>
            <Icon type="ios-phone-portrait" />一站式专属移动应用支持<br/>
            <Icon type="ios-color-filter-outline" />多账户多币种资产管理<br/>
        </span>
         <Button type="primary">
            购买
            <Icon type="ios-arrow-forward" />
        </Button>
    </div> -->
</div>
</template>

<script>
export default {
  name: 'CommonSilder',
  props: ['swiperList'],
  data () {
    return {
    }
  },
  methods: {
      handelSilderChange(oldValue, value){
          console.log("[Silder] silderChange" + oldValue + " -> " + value)
      }
  },
  computed: {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
$imgHeight: 515px;
.silder{ 
    position: relative;
    margin-bottom: $gSpace;
    height: $imgHeight;
    .demo-carousel{
        position: relative;
        overflow: hidden;
        width: 100%;
        height: $imgHeight;
        img{
            top: 0;
            left: 50%;
            position: absolute;
            margin-left: -960px;
            width: 1920px;
            height: $imgHeight;
        }
        p{
            width: 100%;
            top: 50%;
            position: absolute;
            text-align: center;
            color:#fff;
        }
    }
    .silder-body{
        position: relative;
        height: $imgHeight;
        top: -$imgHeight;
        color: #fff;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; 
        p{
            font-size: .32rem;
            padding-bottom: .5rem;
        }
        .tip{
            text-align: left;
            .ivu-icon{
                font-size: .48rem;
                padding: 0 .2rem;
            }
        }
    }
    
}

</style>
